<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击变色</title>
    <link rel="stylesheet" href="./CSS/练习.css">
</head>
<body>
<div class="container">
    <div>点击变色</div>
</div>
<script>
    // 1. 点击div 2s后变色  2. 从数组中返回偶数的元素

    const box = document.querySelector('.container>div')
    const number = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    let str = ''
    // 方法1. ES6 箭头函数
    box.addEventListener('click', function () {
        setTimeout(() => {
            this.style.backgroundColor = 'pink'
            this.style.color = 'skyBlue'

            let even = (number) => {
                number.forEach((item)=>{
                    if (item % 2 === 0) {
                        str += item + ' ';
                    }
                })
                // for (let i = 0; i < number.length; i++) {
                //     if (number[i] % 2 === 0) {
                //         str += number[i] + ' ';
                //     }
                // }
                box.innerHTML = str;

            }
            even(number);
        }, 2000)
    })

    // 方法2. ES5 之前的方法
    // box.addEventListener('click', function () {
    //     let that=this;
    //     setTimeout(function () {
    //         that.style.backgroundColor = 'pink'
    //         that.style.color = 'skyBlue'
    //     }, 2000);
    // })
</script>
</body>
</html>